<template>
  <div class="edit">
    <van-nav-bar :border="false" title="编辑资料" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="picture">
      <!-- 新增头像编辑框 -->
      <!-- <input type="file" accept="image/*" hidden ref="file" @change="onFileChange" /> -->
      <van-uploader class="changePic" v-bind:after-read="setFile" />
      <van-image
        v-if="userInfo.head_img"
        width="70px"
        height="70px"
        round
        :src="$axios.defaults.baseURL+userInfo.head_img"
      />
      <van-image v-else width="70px" height="70px" round />
    </div>
    <PersonalCell label="昵称" :desc="userInfo.nickname" @click="isShowNickname=true" />
    <PersonalCell label="密码" desc="******" @click="isShowPassword=true" />
    <PersonalCell label="性别" :desc="userInfo.gender==1?'男':'女'" @click="isShowGender=true" />
    <!-- 修改昵称弹窗 -->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      show-cancel-button
      @confirm="setNickname"
      @cancel="newNickname=''"
    >
      <van-field v-model="newNickname" placeholder="请输入新昵称" />
    </van-dialog>
    <!-- 修改密码弹窗 -->
    <van-dialog v-model="isShowPassword" title="修改密码" show-cancel-button @confirm="setPassword">
      <van-field v-model="newPassword" placeholder="请输入密码" />
    </van-dialog>
    <!-- 修改性别弹窗 -->
    <van-action-sheet
      v-model="isShowGender"
      :actions="gendelList"
      cancel-text="不想改了"
      @select="setGender"
    />
  </div>
</template>

<script>
import PersonalCell from "../../components/PersonalCell";
export default {
  data() {
    return {
      userInfo: {},
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      gendelList: [
        { name: "男", genderCode: 1 },
        { name: "女", genderCode: 0 },
      ],
      // fileList: [{ url: "../../assets/134.jpg" }],
      newNickname: "",
      newPassword: "",
      newGender: "",
    };
  },
  //请求拿数据
  created() {
    // console.log(localStorage.getItem("token"));
    // console.log(localStorage.getItem("userId"));
    //发送请求获取数据
    this.loadPage();
  },

  //注册
  components: {
    PersonalCell,
  },
  methods: {
    onClickLeft() {
      this.$router.push("/personal");
    },
    //封装页面加载函数
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res);
        // 获取成功将用户数据存放到当前的 data 当中
        if (res.data.message == "获取成功") {
          this.userInfo = res.data.data;
        }
      });
    },
    //封装用户信息加载函数
    editProfile(dataObj) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
        data: dataObj,
      }).then((res) => {
        console.log(res);
        //重新加载页面
        this.loadPage();
      });
    },
    //昵称修改成功
    setNickname() {
      console.log(this.newNickname);
      this.editProfile({ nickname: this.newNickname });
      this.newNickname = "";
    },
    //修改密码成功
    setPassword() {
      if (!this.newPassword) {
        this.$toast.fail("请输入密码");
      }
      this.editProfile({ password: this.newPassword });
    },
    //修改性别
    setGender(item) {
      console.log(item);
      this.editProfile({ gender: item.genderCode });
      this.isShowGender = false;
    },
    //图片改变触发事件
    setFile(fileObj) {
      console.log(fileObj);
      // const imgUrl = URL.createObjectURL(fileObj.file);
      let dataObj = new FormData();
      dataObj.append("file", fileObj.file);
      // for (let item of dataObj) {
      //   console.log(item);
      // }
      this.$axios({
        url: "/upload",
        method: "post",
        headers: {
          Authorization: localStorage.getItem("token"),
        },
        data: dataObj,
      }).then((res) => {
        // console.log(this.$axios.defaults.baseURL + res.data.data.url);
        console.log(res);
        if (res.data.message == "文件上传成功") {
          const imgUrl = res.data.data.url;
          this.editProfile({ head_img: imgUrl });
          console.log(this.userInfo.head_img);
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.edit {
  background-color: papayawhip;
  height: 100%;
  .van-nav-bar {
    //组件背景颜色不设置
    background-color: unset;
  }
  .picture {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    margin: 20/360 * 100vw auto;
    .changePic {
      opacity: 0;
      z-index: 1;
      position: absolute;
      width: 80/360 * 100vw;
      height: 70/360 * 100vw;
    }
  }
}
</style>